<template>
    <div class="row designer-carousel" id="designerCarousel">
      <button class="change-btn prev" @click="prevList" v-if="designers.length > 3">
            <i class="fa fa-angle-left"></i>
        </button>
        <button class="change-btn next" @click="nextList" v-if="designers.length > 3">
            <i class="fa fa-angle-right"></i>
        </button>

        <div class="col-xs-4 item" v-for="designer in designers" :key="designer" v-show="isDisplay(designer.id)" :style="{order: showIndex(designer.id)}">
            <a :href="designerUrl(designer.id)"><img :src="designer.photo"></a>
            <div class="row margin-reset info">
                <h1>{{designer.name}}</h1>
                <div class="post text-green">{{designer.position}}</div>
                <div class="desc">{{designer.description}}</div>
            </div>
        </div>
    </div>
</template>

<script>

import Query from '../query'

export default {
    name: "designerCarousel",

    data: () => ({
        designers: [],
        showIds: []
    }),

    computed: {
        allIds: {
            get: function() {
                var _this = this
                if (_this.designers) {
                    return _this.designers.map((item) => {
                        return item.id
                    })
                }
            }
        }
    },

    methods: {
        showIndex: function(id) {
            return this.showIds.indexOf(id)
        },

        isDisplay: function(id) {
            return this.showIds.indexOf(id) != -1
        },

        designerUrl: function(id) {
          return "/designers/" + id
        },

        prevList: function() {
            var _this = this
            let keyId = _this.showIds[0]
            let currentIndexInAllIds = this.allIds.indexOf(keyId)

            let preId = currentIndexInAllIds === 0 ? this.allIds[this.allIds.length -1] : this.allIds[currentIndexInAllIds -1]

            _this.showIds.pop()
             _this.showIds.unshift(preId)
        },

        nextList: function() {
            var _this = this
            let keyId = _this.showIds[_this.showIds.length - 1]
            let currentIndexInAllIds = _this.allIds.indexOf(keyId)

            let nextId = currentIndexInAllIds === _this.allIds.length - 1 ? _this.allIds[0] : _this.allIds[currentIndexInAllIds + 1]

            _this.showIds.shift()
            _this.showIds.push(nextId)
        },
        async initData() {
          var self = this
          await Query.get('/designers/get_designers').then((data) => {
            self.designers = data

            let arr =  self.designers.filter((item, index) => {
              return index <= 2
            })
            self.showIds = arr.map((item) => {
              return item.id
            })
          })
        }
    },
    mounted() {
      this.initData()
    }
}
</script>


<style lang="less" scoped>
.designer-carousel {
    display: flex;
    flex-flow: row nowrap;
    position: relative;

    .change-btn{
        position: absolute;
        background-color: #fff;
        border: 0;
        top: 45%;
        outline: none;

        &:hover{
            i{
                color:#3ECC77;
            }
        }
        i{
            font-size: 40px;
        }

        &.prev{
            left: -20px;
        }

        &.next{
            right: -20px;
        }
    }
    a{
      display: block;
      width: 100%;
      height: 250px;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
/*     img{
    width: 100%;
    height: 250px;
} */

    .info{
        background-color: #F6F7FC;
        padding: 20px 30px;

        h1{
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 18px;
            color: #484848;
        }

        .post{
            margin-bottom: 10px;
        }

        .desc{
            color: #666666;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            min-height: 60px;
        }
    }
}
</style>
